import { Row, Col, Icon } from 'antd';
import cloneDeep from 'lodash/cloneDeep';
import equal from 'deep-equal';
import './style/index.css';

let sb = '';
class WeaRightLeftLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showLeft: props.defaultShowLeft || false,
      isHover: false,
    };
    sb = this;
  }
  leftShowCo() {
    const { showLeft } = this.state;
    this.setState({ showLeft: !showLeft });
    this.props.onClick && this.props.onClick(!showLeft);
    	// e.stopPropagation();
    	// e.preventDefault();
    	// e.nativeEvent.preventDefault();
  }
  rightShow() {
    const { showLeft } = this.state;
    if (showLeft) {
      this.setState({ showLeft: false });
    }
  }
  rightHide() {
    const { showLeft } = this.state;
    if (!showLeft) {
      this.setState({ showLeft: true });
    }
  }
  componentWillReceiveProps(nextProps, nextState) {
    if (!equal(this.props.defaultShowLeft, nextProps.defaultShowLeft)) {
      this.setState({ showLeft: false });
    }
  }
  scrollheigth() {
    const { type = 0 } = this.props;
    const top = jQuery('.wea-right-left-layout .wea-left').offset() ? (jQuery('.wea-right-left-layout .wea-left').offset().top ? jQuery('.wea-right-left-layout .wea-left').offset().top : 0) : 0;
    const scrollheigth = document.documentElement.clientHeight - top - type;
    jQuery('.wea-right-left-layout ').height(scrollheigth);
  }
  componentDidMount() {
    this.scrollheigth();
  }
  render() {
    const { showLeft, height, isHover } = this.state;
    const { children, leftCom, leftWidth } = this.props;
    // 判断IE8,禁用部分功能
	    const isIE8 = window.navigator.appVersion.indexOf('MSIE 8.0') >= 0;
	    const isIE9 = window.navigator.appVersion.indexOf('MSIE 9.0') >= 0;
	    const leftCol = showLeft ? {
		    	xs: 24,
		    	sm: 24,
		    	md: 24,
		    	lg: 24,
	    	} : {
		    	xs: isIE8 ? 18 : 14,
		    	sm: 12,
		    	md: 12,
		    	lg: 14,
	    	};
	    const rightCol = showLeft ? {
		    	xs: 0,
		    	sm: 0,
		    	md: 0,
		    	lg: 0,
	    	} : {
		    	xs: isIE8 ? 6 : 10,
      sm: 12,
		    	md: 12,
		    	lg: 10,
	    	};
    return (
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@lyzviy`} className="wea-right-left-layout">
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@93nx2z`} {...leftCol} className="wea-left">
          <div
            className="wea-right-left-layout-show-left"
            onClick={this.leftShowCo.bind(this)}
            onMouseEnter={() => this.setState({ isHover: true })}
            onMouseLeave={() => this.setState({ isHover: false })}
            style={{ background: `url('/images/ecology9/crm/leftTree-${showLeft ? 'hide' : 'show'}${isHover ? '' : '-hover'}.png') no-repeat -2px 0` }}
          />
          {leftCom}
        </Col>
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r7yg44`} {...rightCol} className="wea-right">
          {children}
        </Col>
      </Row>
    );
  }
}
jQuery(window).resize(() => {
  sb && sb.scrollheigth && sb.scrollheigth();
});


export default WeaRightLeftLayout;
